import React, { memo, useEffect } from "react";
import { NavLink, useNavigate } from "react-router-dom";
import { connect } from "react-redux";
import { CommontHOC } from '@/assets/utils'

import { Swiper, Toast, Image, Divider, DotLoading, List, Skeleton } from 'antd-mobile'
import './HomeHead.less';
// import logo from '../assets/images/logo.svg';//esModule导入图片
import logo from '../assets/images/default-login.webp';//esModule导入图片

import action from '@/store/action'


import SkeletonAgain from 'Co/SkeletonAgain'
import NewsList from 'Co/NewsList'



class HomeHead extends React.PureComponent {
    arrRef = React.createRef();
    state = {
        date: '', // 日期
        swiperList: [], // 轮播图 list
        list: [], // 新闻list  固定偶数点击去电影详情, 单数去书本详情
        hasMoreList: false, // 是否加载更多
        params: {
            page_limit: 10, page_start: 0 // 分页
        },
        isShow: true  // 没有数据展示骨架
    }

    getInitDate = async (params = {}) => {
        let { page_start, page_limit } = this.state.params;
        try {
            let paramKeys = Reflect.ownKeys(params)
            if (paramKeys.includes('isAdd')) {
                ++page_start
            } else if (paramKeys.includes('isRefresh')) {
                page_start = 0
                Toast.show({
                    icon: 'loading',
                    content: '加载中…',
                    duration: 0
                })
            }
            if (page_start > 1) {
                this.setState({
                    ...this.state,
                    hasMoreList: false
                })
                return
            }

            let { subjects } = await this.props['QUERY_MOVIE_LIST']({
                page_limit, page_start,
            })

            this.setState({
                ...this.state,
                params: {
                    page_start,
                    page_limit
                },
                swiperList: page_start === 0 ? subjects : this.state.swiperList,
                list: page_start === 0 ? subjects : [].concat(this.state.list).concat(subjects),
                hasMoreList: true,
                isShow: false,
            })


        } catch (_) {
            console.error(_)
        }
        Toast.clear()

    }
    goView = () => {
        let {  navigate, loginInfo } = this.props;
        if (!loginInfo?.username){ navigate('/login') ;return}
        navigate('/personal')
    }



    render() {
        let { today, navigate, loginInfo } = this.props;
        let { date, list, hasMoreList, isShow, swiperList } = this.state
        let time = today.split('-')
        return (<>
            <header className="home-head-box"><div className="info">
                <div className="time">
                    <span>day:{time[1]}</span><span>month:{time[0]}</span></div>
                <h2 className="title" onClick={() => navigate({ pathname: 'login' })}>~看电影~</h2>
            </div>
                <div className="picture" onClick={() => this.goView()}>
                    <span> {loginInfo?.username ? loginInfo?.username : '去登录'}</span>
                    <Image lazy alt="点击去个人中心" src={require(`../assets/images/${loginInfo?.username ? 'default-login.webp' : 'logo.svg'}`)} fit='cover' />
                </div>
            </header>
            {/* 轮播图 */}
            <div className="home-swiper-box">
                {isShow ? <Skeleton animated style={{ height: '550px' }} /> : <></>}
                <Swiper autoplay>
                    {
                        swiperList.map((e, index) => {
                            return (<Swiper.Item key={index}>
                                <div
                                    className='swiper-content'
                                >
                                    <div className="swiper-des">{e.title}</div>
                                    <Image src={e.cover}
                                        height={550} fill='contain' />
                                </div>
                            </Swiper.Item>)
                        })

                    }
                </Swiper>

            </div>

            {/* 新闻列表 */}
            <div className="home-newsList-box">
                {isShow ? <SkeletonAgain /> :
                    <div className="home-newsList-item">
                        <Divider style={{
                            fontSize: '16px',
                            fontWeight: "bold",
                            color: "darkslateblue"
                        }}
                            contentPosition='left'>好看电影排行如下:</Divider>
                        <NewsList newsListtData={list}
                            hasMoreList={hasMoreList}
                            onUpdate={this.getInitDate}

                        />
                    </div>}
            </div>
        </>)
    }




    componentDidMount() {
        this.getInitDate()
    }

}

export default connect(
    store => store.login,
    action.homeHead
)(CommontHOC(HomeHead))



// const shallEqual = function shallEqual(objA, objB) {
//     let keysA = Reflect.ownKeys(objA)
//     // eslint-disable-next-line
//     let keysB = Reflect.ownKeys(objB)

//     for (let i = 0; i < keysA.length; i++) {
//         let key = keysA[i]
//         if (!objB.hasOwnProperty(key) || objA[key] !== objB[key]) {
//             return false
//         }
//     }
//
//     return true

// }
